@import 'tweaks-temp';

$asset-suffix: if($variant == 'dark', '-dark', '');
$theme-asset-suffix: if($topbar == 'dark', if($variant == 'dark', '-dark', ''), '-light');
$blackness-asset-suffix: if($blackness == 'false' or $topbar == 'light', '', '-blackness');

//
// Sizes
//

$container-padding: if($compact == 'false', 6px, 4px);

$small-size: if($compact == 'false', 24px, 22px);
$medium-size: if($compact == 'false', 36px, 32px);
$large-size: if($compact == 'false', 48px, 40px);

$bar-size: 6px;
$menuitem-size: if($compact == 'false', 28px, 24px);

//
// Radii
//

$window-radius: 18px;
$corner-radius: 12px;
$menu-radius: 8px;
$circular-radius: 9999px;

//
// Durations
//

$duration: 75ms;
$ripple-fade-in-duration: 225ms;
$ripple-fade-out-duration: 300ms;
$ripple-fade-out-opacity-duration: 1200ms;

//
// Timing functions
//

$ease: cubic-bezier(0.4, 0.0, 0.2, 1);
$ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
$ease-in: cubic-bezier(0.4, 0.0, 1, 1);
$ease-in-out: cubic-bezier(0.4, 0.0, 0.6, 1);

//
// Transition shorthands
//

$transition: all $duration $ease-out;
$transition-shadow: box-shadow $duration $ease-out;

//
// Shadows
//

// Values are based on:
// https://github.com/material-components/material-components-web/blob/master/packages/mdc-elevation/_variables.scss

// NOTE: box-shadow blur less than 2px doesn't work properly, see
// https://gitlab.gnome.org/GNOME/gtk/issues/511

// NOTE 2: Compared to rendering on the Web, GTK seems to have a bigger blur.

$shadow-z1:
  // 0 2px (1px * .6) -1px rgba(black, 0.2),
  0 2px 2px -2px rgba(black, 0.3),
  // 0 1px (1px * .6) 0 rgba(black, 0.14),
  0 1px 2px -1px rgba(black, 0.24),
  // 0 1px (3px * .6) 0 rgba(black, 0.12);
  0 1px 2px -.6px rgba(black, 0.17);
$shadow-z2:
  // 0 3px (1px * .6) -2px rgba(black, 0.2),
  0 3px 2px -3px rgba(black, 0.3),
  // 0 2px (2px * .6) 0 rgba(black, 0.14),
  0 2px 2px -1px rgba(black, 0.24),
  0 1px (5px * .6) 0 rgba(black, 0.12);
$shadow-z3:
  // 0 3px (3px * .6) -2px rgba(black, 0.2),
  0 3px 2px -2px rgba(black, 0.2),
  0 3px (4px * .6) 0 rgba(black, 0.14),
  0 1px (8px * .6) 0 rgba(black, 0.12);
$shadow-z4:
  0 2px (4px * .6) -1px rgba(black, 0.2),
  0 4px (5px * .6) 0 rgba(black, 0.14),
  0 1px (10px * .6) 0 rgba(black, 0.12);
$shadow-z6:
  0 3px (5px * .6) -1px rgba(black, 0.2),
  0 6px (10px * .6) 0 rgba(black, 0.14),
  0 1px (18px * .6) 0 rgba(black, 0.12);
$shadow-z8:
  0 5px (5px * .6) -3px rgba(black, 0.2),
  0 8px (10px * .6) 1px rgba(black, 0.14),
  0 3px (14px * .6) 2px rgba(black, 0.12);
$shadow-z12:
  0 7px (8px * .6) -4px rgba(black, 0.2),
  0 12px (17px * .6) 2px rgba(black, 0.14),
  0 5px (22px * .6) 4px rgba(black, 0.12);
$shadow-z16:
  0 8px (10px * .6) -5px rgba(black, 0.2),
  0 16px (24px * .6) 2px rgba(black, 0.14),
  0 6px (30px * .6) 5px rgba(black, 0.12);
$shadow-z24:
  0 11px (15px * .6) -7px rgba(black, 0.2),
  0 24px (38px * .6) 3px rgba(black, 0.14),
  0 9px (46px * .6) 8px rgba(black, 0.12);

$text-shadow:
  0 1px 1px rgba(black, 0.2),
  0 1px 2px rgba(black, 0.14),
  0 1px 3px rgba(black, 0.12);

// workaround for selection-mode checkboxes
$icon-shadow-z2:
  0 1px 1px rgba(black, 0.2),
  0 2px 2px rgba(black, 0.14),
  0 1px (5px * .6) rgba(black, 0.12);
$icon-shadow-z4:
  0 2px 2px rgba(black, 0.2),
  0 4px (5px * .6) rgba(black, 0.14),
  0 1px (10px * .6) rgba(black, 0.12);
